@import url('https://fonts.googleapis.com/css2?family=Fredoka+One:wght@400;700&display=swap');
@import url('https://fonts.font.im/css?family=Hanalei+Fill:wght@400;700&display=swap');
@import url('https://fonts.font.im/css?family=Ruslan+Display:wght@400;700&display=swap');
@import url('https://fonts.font.im/css?family=Lobster:wght@400;700&display=swap');
@import url('https://fonts.font.im/css?family=Pacifico:wght@400;700&display=swap');
@import url('https://fonts.font.im/css?family=Gloria+Hallelujah:wght@400;700&display=swap');
@import url('https://fonts.font.im/css?family=Permanent+Marker:wght@400;700&display=swap');

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer utilities {

  /* Hide scrollbar for Chrome, Safari and Opera */
  .noScrollbar::-webkit-scrollbar {
    display: none;
  }

  /* Hide scrollbar for IE, Edge and Firefox */
  .noScrollbar {
    -ms-overflow-style: none;
    /* IE and Edge */
    scrollbar-width: none;
    /* Firefox */
  }
}

.colorInput {
  width: 1.75rem;
  height: 1.75rem;
  padding: 0;
  cursor: pointer;
  border: none;
  border-radius: 4px;
}

.colorInput::-webkit-color-swatch-wrapper {
  width: 1.75rem;
  height: 1.75rem;
  padding: 0;
  border: none;
  border-radius: 4px;
}

.colorInput::-webkit-color-swatch {
  width: 1.75rem;
  height: 1.75rem;
  padding: 0;
  border: none;
  border-radius: 4px;
}

body {
  overflow: hidden;
}

.btn:not(.btn-active):hover {
  color: #ffffff80;
  background-color: hsl(var(--u, var(--n)) / var(--tw-bg-opacity));
  border-color: hsl(var(--n, var(--n)) / var(--tw-border-opacity));
}

.tab:not(.tab-active):hover {
  color: #ffffff80;
}

.radial-progress:hover::after {
  opacity: 0.5;
}

.radial-progress:hover::before {
  opacity: 0.5;
}

.tool-btn-box {
  box-sizing: border-box;
  background-color: #fff;
  box-shadow: 0px 0px .9310142993927002px 0px rgba(0, 0, 0, .17), 0px 0px 3.1270833015441895px 0px rgba(0, 0, 0, .08), 0px 7px 14px 0px rgba(0, 0, 0, .05);
  border-radius: 0.5rem;
  padding: calc(0.25rem);
  transition: box-shadow .5s ease-in-out;
}
.tool-btn-box .tool-item{
  transition: box-shadow .5s ease-in-out;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.375rem;
  font-size: 20px;
  color: #6b7280;
  margin: 0px 5px;
  position: relative;
}
.tool-item-on{
  background: #e0dfff;
}


.keydown {
  position: absolute;
  bottom: 0px;
  right: 0px;
  color: #999;
  font-size: 10px;
  border-radius: 3px;
  padding: 1px 3px;
}

.tab-active{
  background: #038fe5 !important;
  color: #fff !important;
}
.btn-group > input[type="radio"]:checked.btn, .btn-group > .btn-active{
  background: #038fe5 !important;
  border: 1px solid #038fe5 !important;
  color: #fff !important;
}
.SliderContainer{
  width: 100%;
  padding: 0 10px;
}
.text-primary-focus{
  color: #038fe5 !important;
}
.checkbox-success{
  border-color: #038fe5 !important;
}
.radio-success:checked, .radio-success[aria-checked=true]{
  border-color: #038fe5 !important;
  background-color: #038fe5 !important;
}
.radio-success{
  border-color: #038fe5 !important;
}